import React, { Component } from 'react'
import { connect } from 'dva';
import Link from 'umi/link';

import { Table, Divider, Popconfirm, Drawer } from 'antd';

import Form from './components/SearchTaskForm';

import { getBtnList } from '@/utils/util';
import Record from './components/Record';

export interface IProps {
  dispatch?: ({ type }: { type: string, payload?: any }) => Promise<any>;
  children?: React.ReactNode;
  loading?: boolean;
  buttons?: Array<any>;
  list?: {
    data: Array<any>;
    dataCnt: number
  };
  cond?: {
    pageSize: number;
  }
}

export interface IState {
  current: number,
  isChangePage?: boolean,
  showRecord?: boolean,
}

@connect(({ task_month, loading, menu }) => ({
  cond: task_month.cond || {},
  list: task_month.taskList || {},
  loading: loading.effects['task_month/queryTaskPage'],
  buttons: menu.buttons, 
}))
class Tasks extends Component<IProps, IState> { 

  state:IState = {
    current: 1,
    showRecord: false,
  }

  queryData(pageNum = 1) {
    const { dispatch, cond } = this.props;
    dispatch({ 
      type: 'task_month/queryTaskPage', 
      payload: { pageNum, ...cond } 
    })
  }

  onShowSizeChange = (current, pageSize) => {
    const { dispatch, cond } = this.props;
    cond.pageSize = pageSize;
    this.setState({ current: 1 }, () => {
      dispatch({
        type: 'task_month/updateTaskCond',
        payload: cond
      })
    })
  }

  componentDidMount() {
    this.queryData()
  }
  

  copy = (v) => {
    const { dispatch } = this.props;
    dispatch({ type: 'task_month/copy', payload: v.id })
  }

  record = (v) => {
    this.setState({ showRecord: true })
  }

  remove = (id: string) => {
    const { dispatch } = this.props;
    this.setState({
      current: 1
    }, () => {
      dispatch({
        type: 'task_month/remove',
        payload: id
      })
    })
  }

  initCurrent = () => {
    this.setState({ current: 1 })
  };
  
  render() {

    const { list, buttons } = this.props;
    const { dataCnt, data } = list;

    const btnList = getBtnList(buttons);

    const pagination = {
      total: dataCnt,
      showTotal: total => `共 ${total} 条`,
      showSizeChanger: true,
      current: this.state.current,
      pageSizeOptions: ['10', '20', '50', '100'],
      onShowSizeChange: this.onShowSizeChange,
      onChange: (current) => {
        this.setState({
          current,
          isChangePage: true
        }, () => this.queryData(current));
      },
    };
    
    const columns = [{
      title: '任务名称',
      dataIndex: 'name',
    }, {
      title: '检查人',
      dataIndex: 'users',
      render: (text) => {
        return (
          Array.isArray(text) ? text.map(v => v.name).join(', ') : '/'
        )
      }
    }, {
      title: '任务状态',
      dataIndex: 'stateName',
    }, {
      title: '操作', key: 'x', render: (record, text, index) => {
        return (
          <div style={{ display: 'flex' }}>
            {/* <a onClick={() => this.record(record)}>历史记录</a> */}
            <span style={{ color: "#ccc" }}>历史记录</span>
            <Divider type="vertical" />
            {
              btnList['删除'] && <>
                <Popconfirm title="请确认是否删除?" onConfirm={() => this.remove(record.id)} okText="确定" cancelText="取消">
                  <a>删除</a>
                </Popconfirm>
                <Divider type="vertical" />
              </>
            }
            {
              btnList['编辑'] && <>
                <Link to={{ pathname: `/data/task_month/${record.id}/update`, state: {isSet: true} }}>修改</Link>
                <Divider type="vertical" />
              </>
            }
            {
              btnList['复制'] && <>
                <a onClick={() => this.copy(record)}>复制</a>
              </>
            }
          </div>
        )
      }
    }]
    
    return (
      <>
        <Form current={this.state.current} initCurrent={this.initCurrent} new={!!btnList['新增']} />
        <Table
          columns={columns}
          pagination={pagination}
          dataSource={data}
          rowKey='id'
          loading={this.props.loading}
          bordered
        />
        <Drawer
          title="历史检查"
          placement="right"
          onClose={() => this.setState({ showRecord: false })}
          visible={this.state.showRecord}
          width={800}
          destroyOnClose={true}
          bodyStyle={{ height: 'calc(100% - 91px)' }}
        >
          <Record />
        </Drawer>
      </>
    )
  }
}


export default  Tasks;